<template>
  <div id="app">
    <div class="feiqiu" v-if="mineInfo">
      <!--<button @click="testMethod">testMethod</button>-->
      <div class="fq_head">
        <div class="fq_operation">
          <div class="operation_right">
            <div class="fq_minimize" @click="fq_minimize"></div>
            <div class="fq_close" @click="fq_close"></div>
          </div>
        </div>
        <div class="fq_headPortrait">
          <avatar :src="mineInfo.tx"
                  @click="openSetWindow()"
                  @mouseout="handleAvatarMouseleave"
                  @mouseover="handleAvatarMouseover(mineInfo.userip)"></avatar>
          <div class="hP_right">
            <div class="hP_name">{{mineInfo.xm}}</div>
            <div class="hP_autograph" v-show="mineInfo.qm">{{mineInfo.qm}}</div>
            <div class="hP_autograph" v-show="!mineInfo.qm">此人很懒，没有个性签名</div>
          </div>
        </div>
        <div ref="search" class="fq_search">
          <span class="search_icon"></span>
          <input @blur="closeSearch" @focus="changeSearch" v-model="search_value" class="search_value" placeholder="搜索">
        </div>
      </div>
      <!---->
      <div class="fq_content">
        <div class="fq_content_main" v-show="!isSearch">
          <div class="fq_tabs">
            <div class="tabs" @click="changeTabs('message')"
                 :class="{selected:tabsShow==='message',littleRedPoint:hasUnread}">
              <span>消息
                <!--                <i class="drop-down"></i>-->
              </span>
            </div>
            <div class="tabs" @click="changeTabs('contacts')"
                 :class="{selected:tabsShow==='contacts'}">
              <span>联系人</span>
            </div>
          </div>
          <div class="content_main">
            <message-item v-show="tabsShow == 'message'"></message-item>
            <contacts v-show="tabsShow == 'contacts'"></contacts>
          </div>
        </div>
        <div class="fq_content_search" v-show="isSearch">

        </div>
      </div>
      <div class="fq_bottom"></div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex'
  import commonUtil from '../../util/commonUtil'
  import Avatar from '../../components/Avatar'
  import messageItem from '../../components/Message'
  import contacts from '../../components/Contacts'

  export default {
    name: 'main-page',
    data () {
      return {
        search_value: '',
        // selected: 'message',
        tabsShow: 'message',
        isSearch: false
      }
    },
    computed: {
      ...mapState({
        unreadCount: state => state.unreadCount
      }),
      ...mapGetters(['getUserInfoByUserip', 'historySessionList']),
      mineInfo () {
        return this.getUserInfoByUserip(commonUtil.getNetworkInfo().address)
      },
      hasUnread () {
        let hasUnread = Object.keys(this.unreadCount).some(ip => this.unreadCount[ip] > 0)
        if (!hasUnread) {
          this.$electron.ipcRenderer.send('openUnread', false)
        }
        return hasUnread
      }
    },
    created () {
      this.win = this.$electron.remote.getCurrentWindow()
    },
    components: {
      Avatar,
      'messageItem': messageItem,
      'contacts': contacts
    },
    methods: {
      handleAvatarMouseleave () {
        myStorage.setItem('communication', {
          action: 'hideInfoMiniWindow'
        })
      },
      handleAvatarMouseover (userip) {
        let ev = event
        let win = this.$electron.remote.getCurrentWindow()
        let bounds = win.getBounds()
        myStorage.setItem('communication', {
          action: 'showInfoMiniWindow',
          data: {
            config: {
              x: bounds.x - 294 - 10,
              y: bounds.y + ev.target.offsetTop,
              width: 294,
              height: 152,
              router: '/infoboxmini'
            },
            data: userip
          }
        })
      },
      openSetWindow () {
        this.$store.dispatch('setSetWindowShow', true)
        // myStorage.setItem('communication', {
        //   action: 'showInfoWindow',
        //   data: {
        //     config: {
        //       x: (window.screen.availWidth - 720) / 2,
        //       y: (window.screen.availHeight - 520) / 2,
        //       width: 720,
        //       height: 520,
        //       router: '/infobox'
        //     },
        //     data: userip
        //   }
        // })
      },
      changeTabs (status) {
        this.tabsShow = status
      },
      changeSearch (el) {
        this.isSearch = true
        this.$refs.search.style.backgroundColor = '#fff'
      },
      closeSearch () {
        this.isSearch = false
        this.$refs.search.style.backgroundColor = 'rgba(0,0,0,.1)'
      },
      fq_minimize () {
        this.win.hide()
      },
      fq_close () {
        this.win.close()
      }
    }
  }
</script>

<style>
  @import "../../assets/common.css";

  * {
    user-select: none;
    cursor: default;
  }

  /*pre {*/
  /*  margin: 0;*/
  /*  white-space: pre-wrap;*/
  /*  word-wrap: break-word;*/
  /*}*/

  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    width: 100vw;
    height: 100vh;
  }
</style>

<style scoped lang="scss">

  #app {
    width: 100%;
    height: 100%;

    .feiqiu {
      width: 100%;
      height: 100%;

      .fq_head {
        width: 100%;
        height: 130px;
        cursor: pointer;
        background: url("../../assets/bg.jpg") no-repeat center;
        /*background-size: 100% 100%;*/
        .fq_operation {
          width: 100%;
          height: 40px;
          display: inline-block;
          -webkit-app-region: drag; //拖动
          .operation_right {
            position: absolute;
            right: 0;
            top: 0;
            -webkit-app-region: no-drag;

            .fq_minimize {
              background: url("../../assets/suoxiao.png") no-repeat center;
              background-size: 80%;

              &:hover {
                background: url("../../assets/suoxiao-1.png") no-repeat center;
                background-size: 80%;
              }

            }

            .fq_close {
              background: url("../../assets/closeaj.png") no-repeat center;
              background-size: 80%;

              &:hover {
                background: url("../../assets/closeaj-1.png") no-repeat center;
                background-size: 80%;
              }
            }

            div {
              display: inline-block;
              width: 20px;
              height: 30px;
              margin: 5px 5px 0 5px;
              text-align: center;
              /*height: 100%;*/
              line-height: 30px;
            }
          }
        }

        .fq_headPortrait {
          position: relative;
          height: 45px;
          padding: 0px 15px;
          margin: 6px 0;

          div {
            display: inline-block;
          }

          .hP_right {
            height: 40px;
            width: calc(100% - 70px);
            margin-left: 10px;

            div {
              height: 16px;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .hP_name {
              font-weight: bold;
            }
          }

        }

        .fq_search {
          width: 100%;
          height: 30px;
          position: relative;
          background: rgba(0, 0, 0, .1);

          .search_icon {
            width: 30px;
            height: 30px;
            margin-right: 5px;
            display: inline-block;
            background: url("../../assets/ck.png") no-repeat center;
          }

          .search_value {
            height: 30px;
            line-height: 30px;
            width: calc(100% - 30px);
            border: none;
            outline: none;
            top: 0px;
            right: 0px;
            position: absolute;
            background: none;
          }
        }
      }

      .fq_content {
        width: 100%;
        height: calc(100% - 165px);

        .fq_content_main {
          height: 100%;

          .fq_tabs {
            height: 40px;
            border-bottom: 1px solid #eee;
            line-height: 38px;
            box-sizing: border-box;
            padding: 0 5px;
            font-size: 0;

            .tabs {
              display: inline-block;
              padding: 0 15px;
              text-align: center;
              position: relative;
              cursor: pointer;
              width: 50%;
              box-sizing: border-box;

              &.littleRedPoint::after {
                content: '';
                position: absolute;
                height: 5px;
                width: 5px;
                border-radius: 50%;
                background-color: red;
                top: calc(50% - 10px);
                left: calc(50% + 20px);
                transform: translate(-50%, -50%);
              }

              span {
                font-size: 14px;
                font-weight: bold;

                /*.drop-down {*/
                /*  position: absolute;*/
                /*  display: none;*/
                /*  top: 0;*/
                /*  left: calc(50% + 20px);*/
                /*  height: 100%;*/
                /*  width: 16px;*/
                /*  background: url("../../assets/arrow1.png") no-repeat center;*/
                /*  background-size: 60%;*/
                /*}*/
              }

              /*&:hover {*/
              /*  .drop-down {*/
              /*    display: block;*/
              /*  }*/
              /*}*/
              &.selected {
                border-bottom: 2px solid #f5822b;
                color: #f5822b;
                height: 40px;
              }

            }


          }

          .content_main {
            height: calc(100% - 45px);
            overflow-y: auto;

            &:hover::-webkit-scrollbar-thumb {
              display: block;
            }
          }
        }

        .fq_content_search {
          width: 100%;
          height: 100%;
        }
      }

      .fq_bottom {
        position: relative;
        height: 35px;
        width: 100%;
        background: lavender;
      }
    }
  }

</style>
